<template>

  <view class="tabbar">
    <image class="background" src="/static/kun/index/矩形 12 拷贝@2x.png"></image>
    <view class="tab-item" @click="switchTab('/pages/index/index')">
      <image :src="current === 'home' ? '/static/wdimg/@2x_home.png' : '/static/wdimg/@2x_home_line.png'"></image>
      <text :class="{ active: current === 'home' }">首页</text>
    </view>
    <view class="tab-item" @click="switchTab('/pages/my/my')">
      <image :src="current === 'my' ? '/static/wdimg/@2x_my.png' : '/static/wdimg/@2x_my_line.png'"></image>
      <text :class="{ active: current === 'my' }">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    current: String // 当前激活的 tab
  },
  methods: {
    switchTab(url) {
      uni.switchTab({
        url
      });
    }
  }
};
</script>

<style>
.tabbar {
  position: fixed;
  bottom: -664rpx;
  left: 0;
  width: 100%;
  height: 60rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.background {
  position: absolute; /* 绝对定位 */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index:-1; /* 背景图片置于最底层 */
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 10rpx;

}
.tab-item image{
	width: 40rpx;
	height: 40rpx;
}
.active {
  color: #A4CAB6;
}
</style>
